$baseFontSize : 20px !default;
$red : #D71345 !default;
$opacity: 1 !default;
@function rem($px) {
  @return $px / $baseFontSize * 1rem;
}
@mixin displayflex{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($size:1){
  -webkit-box-flex:$size;
  -moz-box-flex:$size;
  -webkit-flex:$size;
  -ms-flex:$size;
  flex:$size;
}
@mixin flexflowCol($direction:column,$dir:vertical){
  -webkit-box-orient:$dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow:$direction nowrap;
  -ms-flex-flow:$direction nowrap;
  -moz-flex-flow:$direction nowrap;
  flex-flow:$direction nowrap;
}
@mixin flexflowRow($direction:row,$dir:horizontal) {
  -webkit-box-orient:$dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow:$direction nowrap;
  -ms-flex-flow:$direction nowrap;
  -moz-flex-flow:$direction nowrap;
  flex-flow:$direction nowrap;
}
@mixin shadow($x:0,$y:0px,$z:5px,$color:#bdbdbd) {
  box-shadow : $x $y $z $color;
  -webkit-box-shadow:  $x $y $z $color;
  -moz-box-shadow:  $x $y $z $color;
}
*{
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color:rgba(255,255,255,0);
  font-family: Helvetica, sans-serif;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}
a:active,a:hover,a:link,a:visited{
  text-decoration: none;
  outline: none;
}
html,body{
  width: 100%;
  height: 100%;
  font-size: 20px;
}
html {
  font-size: 20px;
}
//侧边栏
.sidebar{
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  z-index:1001;
  overflow: auto;
  position: fixed;
  top:0;
  left: rem(100px);
  right:0;
  bottom: 0;
  background-color: white;
  &.sidebar-transition{
    -webkit-transition:.15s ease-out;
    transition: .15s ease-out;
  }
  &.sidebar-in{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  .sidebar-content{
    position: relative;
  }
  .sidebar-title,.sidebar-item{
    width: 100%;
    height: rem(60px);
    line-height: rem(60px);
    border-bottom: 1px solid #D8D8D8;
    @include displayflex;
    @include flexflowRow();
    .left{
      width: rem(64px);
      height: 100%;
      background: url(/old/images/sidebar_user.png) no-repeat center;
      background-size: rem(34px);
    }
    .right{
      @include flex(1);
      font-size: rem(16px);
      color:#424242;
    }
  }
  .sidebar-item{
    height: rem(42px);
  }
  .sidebar-item .right{
    color:#737373;
    font-size: rem(14px);
    line-height: rem(42px);
  }
  .sidebar-item .left{
    &.sidebar-index{
      background: url(/old/images/sidebar_index.png) no-repeat center;
      background-size: rem(26px);
    }
    &.sidebar-order{
      background: url(/old/images/sidebar_order.png) no-repeat center;
      background-size: rem(26px);
    }
    &.sidebar-tourism{
      background: url(/old/images/sidebar_tourism.png) no-repeat center;
      background-size: rem(26px);
    }
    &.sidebar-admin{
      background: url(/old/images/sidebar_admin.png) no-repeat center;
      background-size: rem(26px);
    }
  }
}
.sidebar-backdrop{
  z-index:1000;
  position: fixed;
  top:0;
  bottom:0;
  left: 0;
  right:0;
  opacity: 0;
  background-color: black;
  transition:opacity .15s linear;
  -webkit-transition:opacity .15s linear;
  &.in{
    opacity: .42;
  }
}
//page相关
header{
  position: absolute;
  height: rem(40px);
  width: 100%;
  @include displayflex;
  @include flexflowRow();
  background-color: $red;
  z-index: 103;
  top:0;
  .back{
    width: rem(38px);
    height: 100%;
    background: url(/old/images/back.png) no-repeat center;
    background-size: rem(9px) rem(16px);
    text-indent: -9999px;
    &.no-icon{
      background: none;
    }
  }
  .center{
    @include flex(1);
    font-size: rem(16px);
    color:white;
    line-height: rem(40px);
    text-align: center;
  }
  .home{
    text-indent: -9999px;
    height: 100%;
    width: rem(38px);
    background: url(/old/images/admin.png) no-repeat center;
    background-size:rem(17px) rem(17px);
    &.no-icon{
      background: none;
    }
  }
}
footer{
  position: absolute;
  height:rem(40px);
  width:100%;
  line-height:rem(40px);
  bottom: 0;
}
footer ~ .page-content{
  bottom:rem(40px);
}
header ~ .page-content{
  top: rem(40px);
}
.page,.page-group{
  position: absolute;
  overflow: hidden;
  width:100%;
  top:0;
  left:0;
  height: 100%;
}
.page{
  display: none;
  z-index:100;
  &.page-current{
    display: block;
  }
}
.page-content{
  position: absolute;
  width:100%;
  top:0;
  bottom:0;
  overflow: auto;
  -webkit-overflow-scrolling:touch;
}
//page切换动画效果
.center-to-left{
  display: block;
  -webkit-animation: pageFromCenterToLeft 400ms forwards;
  animation: pageFromCenterToLeft 400ms forwards;
}
.center-to-right{
  display: block;
  -webkit-animation: pageFromCenterToRight 400ms forwards;
  animation: pageFromCenterToRight 400ms forwards;
}
.left-to-center{
  z-index: 102;
  display: block ;
  -webkit-animation: pageFromLeftToCenter 400ms forwards;
  animation: pageFromLeftToCenter 400ms forwards;
}
.right-to-center{
  //z-index: 102;
  display: block ;
  -webkit-animation: pageFromRightToCenter 400ms forwards;
  animation: pageFromRightToCenter 400ms forwards;
}
@-webkit-keyframes pageFromRightToCenter {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: .9;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes pageFromRightToCenter {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: .9;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes pageFromCenterToRight {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
    opacity: $opacity;
  }
}
@keyframes pageFromCenterToRight {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
    opacity: $opacity;
  }
}
@-webkit-keyframes pageFromCenterToLeft {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
    opacity: $opacity;
  }
}
@keyframes pageFromCenterToLeft {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
    opacity: $opacity;
  }
}
@-webkit-keyframes pageFromLeftToCenter {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    opacity: .9;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes pageFromLeftToCenter {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    opacity: .9;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
//alert && confirm
.confirm-bg{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10600;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(0,0,0,.4);
  -webkit-transition-duration:400ms;
  transition-duration: 400ms;
}
.confirm-content{
  background-color: #e8e8e8;
  border-radius: rem(4px);
  width:rem(290px);
  position: absolute;
  z-index:11000;
  left: 50%;
  box-sizing: border-box;
  margin-left: rem(-290px/2);
  top:50%;
  text-align: center;
  background-color: white;
  color:#535353;
  opacity: 0;
  font-size: rem(18px);
  -webkit-transform:translate3d(0,0,0) scale(1.185);
  transform: translate3d(0,0,0) scale(1.185);
  -webkit-transition-property:-webkit-transform,opacity;
  transition-property: transform,opacity;
  &.in{
    opacity: 1;
    -webkit-transition-duration:400ms;
    transition-duration: 400ms;
    -webkit-transfrom:translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
  }
  &.out{
    opacity: 0;
    z-index: 10999;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: translate3d(0, 0, 0) scale(0.815);
    transform: translate3d(0, 0, 0) scale(0.815);
  }
  .confirm-inner{
    padding: rem(25px) rem(25px) rem(19px) rem(25px);
  }
  .confirm-detail{
    font-size: rem(14px);
    color:#535353;
    margin-top: rem(10px);
  }
  .confirm-buttons{
    @include displayflex;
    @include flexflowRow(row,horizontal);
    border-top:1px solid #E4E4E4;
    span{
      display: block;
      @include flex(1);
      height: rem(50px);
      line-height: rem(50px);
      box-sizing: border-box;
      &:active{
        background-color: #d4d4d4;
      }
    }
    span + span{
      border-left: 1px solid #E4E4E4;
    }
  }
}
.confirm-bg.confirm-bg-visible{
  visibility: visible;
  opacity: 1;
}
.alert-msg {
  position: absolute;
  z-index: 10000;
  top: 40%;
  width: 100%;
  text-align: center;
  opacity: 0;
  -webkit-transform: translate3d(0, 0%, 0);
  transform: translate3d(0, 0%, 0);
  -webkit-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}
.alert-msg.in {
  opacity: 1;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.alert-msg div {
  background-color: rgba(63, 63, 63, 0.47);
  color: white;
  display: inline;
  margin: 0 auto;
  font-size: 0.7rem;
  padding: 0.55rem 1.55rem;
  border-radius: 1.6rem;
}
// preloader
@-webkit-keyframes rotate{
  from{
    -webkit-transform:rotate(360deg)
  }
  to{
    -webkit-transform:rotate(0deg)
  }
}
@keyframes rotate{
  from{
    transform:rotate(360deg)
  }
  to{
    transform:rotate(0deg)
  }
}
.preloader-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10600;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
  visibility: visible;
  opacity: 0;
  background: none;
}
.preloader-modal {
  position: absolute;
  left: 50%;
  top: 45%;
  padding: 0.4rem;
  margin-left: -1.25rem;
  margin-top: -1.25rem;
  background: rgba(0, 0, 0, 0.8);
  z-index: 11000;
  border-radius: 0.25rem;
  .preloader {
    display: block;
    width: 1.7rem;
    height: 1.7rem;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    &.preloader-animation{
      -webkit-animation:rotate .7s linear 0s normal none infinite ;
      animation:rotate .7s linear 0s normal none infinite ;
    }
    &:after {
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      background: url("") no-repeat center;
      background-position: 50%;
      background-size: 100%;
    }
  }
}